<template>
<div class="footer">
    <ul>
        <li>
            <router-link to="/home">
                <van-icon name="wap-home" :color="homeBtnColor" @click="changeBtn('homeBtn')" size="22" />
            </router-link>
        </li>
        <li>
            <router-link to="/baseinfo">
                <van-icon name="manager" :color="infoBtnColor" @click="changeBtn('infoBtn')" size="22" />
            </router-link>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    data() {
        return {
            homeBtnColor: '#639339',
            infoBtnColor: '#cbe4b4',
        }
    },
    mounted() {
        // 判断当前选中的是哪个tab
        if (sessionStorage.getItem('tabState') == 'homeBtn') {
            this.homeBtnColor = '#639339'
            this.infoBtnColor = '#cbe4b4'
        } else {
            this.homeBtnColor = '#cbe4b4'
            this.infoBtnColor = '#639339'
        }
    },
    methods: {
        // 点击tab切换状态
        changeBtn(btnName) {
            sessionStorage.setItem('tabState', btnName)
            if (btnName == 'homeBtn') {
                this.homeBtnColor = '#639339'
                this.infoBtnColor = '#cbe4b4'
            } else {
                this.homeBtnColor = '#cbe4b4'
                this.infoBtnColor = '#639339'
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import "../assets/css/common.less";

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: @bg-color;
    height: 2.5rem;

    ul li {
        display: inline-block;
        width: 50%;
        text-align: center;
        line-height: 2.875rem;
    }
}
</style>
